<template>
  <el-container ref="container2" :style="`overflow-x:hidden;height:${c1h*0.97}px`">
    <el-scrollbar :class="sidebar.opened?'scroll-expand':'scroll-collapse'">
      <sidebar></sidebar>
    </el-scrollbar>
    <el-main class="loading-mask">
      <el-container ref="container3" >
        <el-header height="auto">
          <navbar></navbar>
        </el-header>
        <el-main ref="main" style="overflow-y: auto">
welcome
        </el-main>
        <el-footer>
        </el-footer>
      </el-container>
    </el-main>
  </el-container>
</template>
<script>
import {
  Topbar,
  Navbar,
  Sidebar,
  AppMain
} from '@/views/layout'
export default {
  name: 'home',
  data () {
    return {
      c1h: 0,
    }
  },
  components: {
    Topbar,
    Navbar,
    Sidebar,
    AppMain
  },
  watch: {

  },
  computed: {
    sidebar () {
      return this.$store.state.app.sidebar
    }
  },
  created (){
  },
  methods: {
    reset(){
      window.localStorage.clear()
      this.initialAll()
    },
    computeContainerSize () {
      var that = this
      var wh = window.innerHeight
      that.c1h = wh

      that.$nextTick(function () {
        var mh = that.$refs.main.$el.clientHeight
        that.$store.dispatch('UpdateMainContainerHeight', mh)
        sessionStorage.setItem('mainContainerHeight', mh)
      })
    }
  },
  mounted () {
    var that = this
    var wh = window.innerHeight
    that.c1h = wh
    window.onresize = function () {
      that.$nextTick(function () {
        that.computeContainerSize()
      })
    }
    this.$nextTick(function () {
      that.computeContainerSize()
    })
  }
}
</script>

<style lang="scss" scoped>
.loading-mask {
  position: relative;
}
.scroll-expand {
    padding-right: 0;
    overflow: initial !important;
    .el-scrollbar__wrap {
      overflow: initial !important;
      overflow-x: hidden;
      .el-scrollbar__view {
          height: 100%;
      }
    }
}
.scroll-collapse {
    padding-right: 15px;
    .el-scrollbar__wrap {
        overflow: inherit !important;
        .el-scrollbar__view {
            height: 100%;
        }
    }
    overflow: initial !important;
}
</style>
